<template>
	<view class="content fofa">
		<tabnav title="印章管理" :col="back"></tabnav>
		<view class="wid100">
			<view class="wid100 bacFFF" style="height: 148rpx;">
				<view class="wid87 hei100 mar dis disAl disJuB">
					<view class="wid87 dis disAl borRad10" style="height: 71rpx;background-color: #F4F3F3;">
						<view class="dis disJuC" style="width: 20%;">
							<image src="https://www.sign.run/applet/static/wenjian/suosou.png" style="width: 31rpx;height: 31rpx;"></image>
						</view>
						<input class="wid80 " @input="suosouInput" placeholder="搜索模板名称"/>
					</view>
					<image src="https://www.sign.run/applet/static/wode/shaixuan.png" style="width: 42rpx;height: 42rpx;"></image>
				</view>
			</view>
			<scroll-view :style="'height: calc(100vh - 148rpx - 120rpx - 90rpx - '+tops+'px);'" @refresherrefresh="onPulling" :refresher-triggered="triggered"
				scroll-y="true" class="scroll-Y" @scrolltolower="lower" :refresher-enabled="true">
				<view class="wid100" v-if="list.length == 0">
					<view class="wid100" style="height: 220rpx;"></view>
					<view class="wid100 textCen">
						<image src="https://www.sign.run/applet/static/wenjian/wushuju.png" style="width: 306rpx;height: 200rpx;"></image>
						<view class="mar-top30 foSi25" style="color: #858585;">请联系企业印章管理员或企业超管进行印章授权</view>
					</view>
				</view>
				<view class="wid100" v-if="list.length != 0">
					<view class="wid87 mar borRad20 bacFFF mar-top30" @click="tiaozhuan('/pages/seal/particulars')"
					 v-for="(item,index) in list" :key="index">
						<view class="wid100 dis disAl disJuC poRel" style="height: 223rpx;">
							<view class="poAbs dis disAl disJuC coFFF foSi20" :style="{'background-color':back}"
							style="top: 40rpx;left: 0;border-top-right-radius: 40rpx;border-bottom-right-radius: 40rpx;padding: 10rpx 20rpx;">已启用</view>
							<image src="https://www.sign.run/applet/static/index/hetong.png" style="width: 180rpx;height: 180rpx;"></image>
						</view>
						<view class="xia"></view>
						<view class="hei80 wid90 mar dis disAl foSi25">企业公章</view>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
			</scroll-view>
		</view>
		<view class="wid100 dis disAl disJuC poAbs bacFFF box1" style="height: 120rpx;bottom: 0;">
			<view class="dis disAl disJuC coFFF hei80 foSi35 borRad10" @click="toggle('bottom')" 
			:style="'background-color: '+back+';'" style="width: 400rpx;">添加印章</view>
		</view>
		<uni-popup ref="popup1" background-color="#fff">
			<view style="height: 20rpx;"></view>
			<view class="dis disAl disJuC foSi40 hei60">印章管理</view>
			<view class="wid90 mar foSi30 mar-top10" style="line-height: 42rpx;color: #858585;">请在电脑浏览器打开
			<span @click="fuzhi" :style="'color: '+back+';'" style="margin: 0 10rpx;">https://www.baidu.com/</span>
			，登陆后进入「印章管理」，可添加其他电子印章</view>
			<view class="xia mar-top20"></view>
			<view class="wid90 mar dis disAl disJuB foSi35 mar-top20">
				<view class="hei80 dis disAl disJuC coFFF borRad10" :style="'background-color: '+back+';'" @click="fuzhi"
					style="width: 300rpx;">复制链接</view>
				<view class="hei80 dis disAl disJuC coFFF borRad10" :style="'background-color: '+back+';'" @click="guanbi1"
				 style="width: 300rpx;">关闭</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" background-color="#fff">
			<view style="height: 20rpx;"></view>
			<view class="hei80 dis disAl disJuC">
				<view class="foSi35 fowe600" style="">添加印章</view>
			</view>
			<view class="wid90 mar mar-top30">
				<view class="dis" @click="toggle1('bottom')">
					<view class="hei60 dis disAl" style="width: 10%;">
						<image src="https://www.sign.run/applet/static/wode/qiye.png" style="width: 36rpx;height: 32rpx;"></image>
					</view>
					<view class="wid90 dis disAl disJuB">
						<view>
							<view class="foSi30 hei60 dis disAl">企业电子印章</view>
							<view class="foSi20" style="color: #7A7979;">支持生成企业公章、合同专用章等企业印章</view>
						</view>
						<uni-icons size="25" color="#5E5E5E" type="right"></uni-icons>
					</view>
				</view>
				<view class="dis mar-top20" @click="tiaozhuan('/pages/seal/representative')">
					<view class="hei60 dis disAl" style="width: 10%;">
						<image src="https://www.sign.run/applet/static/seal/faren.png" style="width: 27rpx;height: 29rpx;"></image>
					</view>
					<view class="wid90 dis disAl disJuB">
						<view>
							<view class="foSi30 hei60 dis disAl">法定代表人章</view>
							<view class="foSi20" style="color: #7A7979;">支持创建法定人代表章</view>
						</view>
						<uni-icons size="25" color="#5E5E5E" type="right"></uni-icons>
					</view>
				</view>
				<view class="dis mar-top20">
					<view class="hei60 dis disAl" style="width: 10%;">
						<image src="https://www.sign.run/applet/static/seal/fengzhang.png" style="width: 26rpx;height: 30rpx;"></image>
					</view>
					<view class="wid90 dis disAl disJuB">
						<view>
							<view class="foSi30 hei60 dis disAl">骑缝章</view>
							<view class="foSi20" style="color: #7A7979;">支持创建企业骑缝章	</view>
						</view>
						<uni-icons size="25" color="#5E5E5E" type="right"></uni-icons>
					</view>
				</view>
			</view>
			<view class="dis disAl disJuC hei80 foSi25" @click="guanbi">取消</view>
		</uni-popup>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				back: uni.getStorageSync('back'),
				suosou: '',
				// 判断是否还在继续输入
				timer: null,
				tops: 0,
				last_page: 0,
				page: 0,
				triggered: false,
				_freshing: false,
				list: ['',"",''],
			}
		},
		onLoad() {
		},
		created() {
			var that = this
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					that.tops = e.statusBarHeight
				}
			})
		},
		methods: {
			fuzhi(){
				uni.setClipboardData({
					data: 'https://www.baidu.com/'
				});
				this.guanbi()
			},
			toggle1(type) {
				this.$refs.popup.close()
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup1.open(type)
			},
			guanbi1(){
				this.$refs.popup1.close()
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			guanbi(){
				this.$refs.popup.close()
			},
			onPulling(e) {
				var that = this
				if (that._freshing) return;
				that._freshing = true;
				that.triggered = true
				console.log("onpulling", e);
				setTimeout(() => {
					that.triggered = false;
					that._freshing = false;
				}, 3000)
			},
			lower(e) {
				if(this.last_page != this.page+1){
					this.page++
				}
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
			suosouInput: function(event) {
				if (this.timer !== null) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.suosou = event.target.value
					this.page = 0
					console.log(this.suosou)
					// this.getList()
				}, 1000)
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F4F3F3;
	}
	.foSi28{
		font-size: 28rpx;
	}
	.xia{
		height: 1rpx;
		background: #f1f1f1;
	}
</style>
